<!--
 * @Description: 字节跳动中秋月饼礼盒特效（掘金活动）
 * @Author: Vergil
 * @Date: 2021-09-08 22:28:03
 * @LastEditTime: 2021-09-19 09:41:06
 * @LastEditors: Vergil
-->
<!-- byteDance.html-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>字节跳动中秋月饼礼盒</title>
  <link rel="stylesheet" href="./css/moonCake.css">
  <link rel="stylesheet" href="./css/card.css">
</head>
<body>
  <div class="bg">
    <ul class="content " id="content">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li>
        <img src="./images/cake1.jpg" alt="">
        <img src="./images/cake2.jpg" alt="">
      </li>
    </ul>
    <ul class="outerPack">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li>
      </li>
      <li></li>
    </ul>
    <ul class="top" id="top">
      <li>
        <img src="./images/byte.jpg" alt="">
      </li>
    </ul>
    <div class="card" id="card">
      <div class="imgBox" id="imgBox">
      </div>
      <div class="details">
        <div class="detailsContent">
          <h3>亲爱的朋友们：</h3>
          <h3>你好！</h3>
          <p>小卢在这里祝你中秋节快乐呀！！！月圆家圆事圆圆圆满满，国和家和人和和和睦睦，国庆中秋喜相逢祝你佳节好运好心情！！</p>
        </div>
        <div class="congratulations">
          <h3>同赏明月·共度佳节</h3>
          <p>-祝大家项目上线无bug</p>
          <p>-祝同学考研顺利早上岸</p>
          <p>-祝老哥跳槽更上一层楼</p>
        </div>
      </div>
    </div>
  </div>
<script>
  // 看到这里的朋友，祝你中秋快乐哟~~天天开心 happy everyday！！！
  //by the way 我在参加掘金的中秋活动，很需要大家的点赞和评论 如果这篇文章有帮到大家的话麻烦支持一下哟~
  var top=document.getElementById('top')
  var content=document.getElementById('content')
  var card=document.getElementById('card')
  var imgBox=document.getElementById('imgBox')
  top.addEventListener("click", ()=>{
    addClass(content,'moveOut')
    setTimeout(()=>{
      addClass(card,'showCard')
    },500)
  })
  card.onmouseover=()=>{
    toggleClass(imgBox,'imgBoxAct')
  }
  card.onmouseout=()=>{
    toggleClass(imgBox,'imgBoxAct')
  }
  function hasClass(obj,cls) {  
      return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));  
  };  
  function addClass(obj,cls) {  
      if (!hasClass(obj,cls)) obj.className += " " + cls;  
  }  
  Object.prototype.removeClass = function removeClass(obj,cls) {  
      if (hasClass(obj,cls)) {  
          var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');  
          obj.className = obj.className.replace(reg, ' ');  
      }  
  };  
  function toggleClass(obj,cls){  
      if(this.hasClass(obj,cls)){  
          this.removeClass(obj,cls);  
      }else{  
          this.addClass(obj,cls);  
      }  
  };
</script>
</body>
</html>